import React, { Component, PureComponent,memo } from 'react'

// 函数式组件使用memo包裹，实现的效果类型继承PureComponent
const MyMemo = memo(function() {
    return (
        <div>
            memo包裹函数式组件
        </div>
    )
})

export default class Update extends Component {
    constructor() {
        super();
        this.state = {
            arr: ["jack"]
        }
    }
    render() {
        return (
            <div>
                <MyMemo></MyMemo>
                {this.state.arr} -- <button onClick={this.add.bind(this)}>add</button>
            </div>
        )
    }
    // 该方法有两个参数：
    // 参数一：nextProps 修改之后，最新的props属性
    // 参数二：nextState 修改之后，最新的state属性
    // 该方法返回值是一个boolean类型
    // 返回值为true，那么就需要调用render方法；
    // 返回值为false，那么久不需要调用render方法；
    // 默认返回的是true，也就是只要state发生改变，就会调用render方法；
    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }
    // 也可以组件继承PureComponent， PureComponent使用的是浅比较，进行的优化

    add() {
        this.setState({
            arr: [...this.state.arr,"add"]
        })
    }

}
